<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <el-row>
                <i class="el-icon-search"></i>
                <span class="search-title">筛选条件</span>
            </el-row>
            <el-row class="row-margin">
                <el-form
                    :inline="true"
                    :model="requestSearch"
                    class="demo-form-inline"
                    ref="researchForm"
                    prop="categoryId"
                >
                    <el-form-item>
                        <el-cascader
                            v-model="requestSearch.categoryId"
                            :options="categoryList"
                            placeholder="商品分类"
                            :props="{ emitPath: false }"
                            clearable
                        ></el-cascader>
                    </el-form-item>

                    <el-form-item prop="supplierId">
                        <el-select v-model="requestSearch.supplierId" placeholder="全部供货商">
                            <el-option
                                v-for="item in supplierList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="nameOrCode">
                        <el-row type="flex">
                            <el-input
                                placeholder="商品名称/商品编码"
                                v-model="requestSearch.nameOrCode"
                            >
                                <!-- <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button> -->
                            </el-input>
                            <el-button type="primary" @click="handleSearch" style="margin-left:10px"
                                >查询</el-button
                            >
                            <el-button @click="handleReset" style="margin-left:10px"
                                >重置</el-button
                            >
                        </el-row>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>
        <el-row class="row-margin">
            <el-button type="primary" @click="addProduct">新增商品</el-button>
        </el-row>
        <el-table :data="productList" style="width: 100%" border ref="productListInfo">
            <el-table-column label="商品/价格" width="300" align="center">
                <template slot-scope="scope">
                    <el-row type="flex" justify="center">
                        <el-avatar shape="square" :size="50" :src="scope.row.coverUrl">
                            <img
                                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                            />
                        </el-avatar>
                        <div class="goods-info">
                            <div class="goods-name" :title="scope.row.name">
                                {{ scope.row.name }}
                            </div>
                            <div>
                                <span class="goods-price"
                                    >￥ {{ formatMoney(scope.row.sellPrice) }}</span
                                >
                                <span class="goods-unit" :title="scope.row.unit">
                                    {{ scope.row.unit }}
                                </span>
                            </div>
                        </div>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column label="仓库库存" prop="totalStock" align="center"></el-table-column>
            <el-table-column label="累计销量" align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="showSalesModal(scope.$index, scope.row)"
                        >{{ scope.row.sales }}</el-button
                    >
                </template>
            </el-table-column>

            <el-table-column label="供货价" prop="supplyPrice" align="center">
                <template slot-scope="scope">
                    <span>￥ {{ formatMoney(scope.row.supplyPrice) }}</span>
                </template>
            </el-table-column>

            <el-table-column label="供货商" prop="supplierName" align="center"></el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" class="pagination">
            <el-pagination
                background
                layout="total, sizes,  prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15, 20]"
                @size-change="handleSizeChange"
                :page-size="requestSearch.pageSize"
                :total="pagiData.total"
                :current-page.sync="requestSearch.pageNum"
            ></el-pagination>
        </el-row>

        <el-dialog
            :goodsId="countSaleGoodsId"
            title="累计销量"
            :visible.sync="countSalesVisible"
            width="80%"
        >
            <countSales />
        </el-dialog>

        <!-- <el-dialog title="编辑" :visible.sync="editVisible" width="80%">
      <countSales />
    </el-dialog>-->
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import countSales from './components/countSales';
import { getCateList, getSupplierList, getGoodsList, getGoodsDetail } from '@/api/goodsBase';
import { formatMoney } from '@/utils/goods';
export default {
    name: 'productList',
    components: { countSales },
    computed: {
        ...mapGetters(['goodsDetailInfo'])
    },
    mounted() {},
    data() {
        return {
            requestSearch: {
                pageNum: 1,
                pageSize: 20
            },
            supplierList: [],
            categoryList: [],
            productList: [
                {
                    supplierName: 'test',
                    sales: 128,
                    coverUrl: '',
                    id: '1'
                }
            ],
            pagiData: {
                total: 100,
                current: 1
            },
            countSalesVisible: false,
            editVisible: false,
            countSaleGoodsId: ''
        };
    },
    created() {
        this._refresh(); //for pg
    },
    methods: {
        _refresh() {
            this.getTableList(this.requestSearch);
            getCateList().then(res => {
                if (res.data && res.data.success == true) {
                    let list = res.data.data;
                    this.categoryList = list.map(el => {
                        let option = {
                            value: el.category.id,
                            label: el.category.name,
                            children: el.detailList.map(el => {
                                return { value: el.categoryId, label: el.name };
                            })
                        };
                        if (!option.children || option.children.length == 0) {
                            option['disabled'] = true;
                        }
                        return option;
                    });
                } else {
                    this.categoryList = [];
                }
            });

            getSupplierList().then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.supplierList = resdata.data;
                } else {
                    this.supplierList = [];
                }
            });
        }, // 获取列表， 更新分页
        getTableList(queryData) {
            getGoodsList(queryData).then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.productList = resdata.data;
                    this.pagiData.total = resdata.extra.total;
                    console.log(this.pagiData);
                } else {
                    this.productList = [];
                }
            });
        },
        // 重置分页
        handleSearch() {
            this.requestSearch.pageNum = 1;
            if (this.requestSearch.categoryId == null) {
                delete this.requestSearch['categoryId'];
            }
            if (this.requestSearch.nameOrCode == null) {
                delete this.requestSearch['nameOrCode'];
            }
            if (this.requestSearch.supplierId == null) {
                delete this.requestSearch['supplierId'];
            }
            this.getTableList(this.requestSearch);
        },
        // 重置页面， 包括搜索框，分页,
        handleReset() {
            this.$refs.researchForm.resetFields();
        },
        handleEdit(index, row) {
            this.$router.push(`updateProduct/${row.id}`); // go to
        },
        showSalesModal(index, row) {
            this.countSaleGoodsId(row.id);
            this.countSalesVisible = true;
        },
        handleCurrentChange(val) {
            this.requestSearch.pageNum = val;
            this.getTableList(this.requestSearch);
        },
        handleSizeChange(val) {
            this.requestSearch.pageNum = 1;
            this.requestSearch.pageSize = val;
            this.getTableList(this.requestSearch);
        },

        addProduct() {
            this.$router.push('add');
        },
        formatMoney(num) {
            return formatMoney(num);
        }
    }
};
</script>
<style scoped lang="scss">
.search-title {
    font-size: 18px;
}
.pagination {
    margin: 15px 0;
}
.row-margin {
    margin: 15px 0;
}
.goods-info {
    width: 150px;
}
.goods-name {
    width: 150px;
    height: 30px;
    text-align: start;
    padding-left: 10px;
    overflow: hidden;
    line-height: 15px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.goods-price {
    color: red;
    float: left;
    margin-left: 10px;
}
.goods-unit {
    float: right;
    text-align: left;
    width: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
